<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
		body{
			background:  #e84144;
		}
		.sx-foot,.sx-info{
			background: #222;
			padding: 0.75rem;
			font-size: 0.75rem;
			border-radius: 0.5rem;
			box-shadow: 0px 0px 5px 0px #222;
			margin: 1rem 0;
		}
		.h2{
			padding: 0;
			font-size: 0.8rem;
			font-weight: bold;
			padding-bottom: 0.5rem;
			border-bottom: 1px solid #333;
			margin-bottom: 0.5rem;
			color: #fff;
		}
		.h2 em{
			display: inline-block;
			width: 3px;
			height: 0.85rem;
			background: #ffc107;
			margin-right: 0.35rem;
			vertical-align: middle;
		}
		.h2 i{
			font-size: 0.75rem;
		}
		.sx-foot .p .r{
		 	opacity: 0.8
		}
		.sx-foot .p .s{
			display: flex;
			padding: 0.25rem 0;
		}
		.sx-foot .p .s .l{
			background: #ffc107;
			border-radius: 50%;
			font-size: 0.65rem;
			height: 1rem;
			line-height: 1rem;
			width: 1.1rem;
			text-align: center;
			font-weight: 200;
		}
		.sx-foot .p .s .r{
			padding-left: 0.5rem;
			width: 100%;
		}
		.sx-top{
			background: url('../i/jinbi/yaoqing.png');
			background-repeat: no-repeat;
			background-position: top;
			background-size:cover;
			position: relative;
		}
		.sx-top .b{
			position: relative;
			text-align: center;
		}
		.sx-btn{
			background: #ffc107;
			color: #fff;
			width: 10rem;
			text-align: center;
			border-radius: 1rem;
			padding: 0.5rem 0;
			font-size: 0.85rem;
			margin: 0 auto;
		}
		.sx-top p{
			padding: 0.75rem 0;
			padding-bottom: 0;
			line-height: 1.5rem;
		}
		.sx-top .t{
			text-align: center;
			padding: 1rem 0;
		}
		.sx-top .t p{
			font-weight: bold;
			font-size: 0.8rem;
			padding: 0;
			letter-spacing: 2px
		}
		.sx-top .t p span{
			color: #ffc107;
			font-size: 1.2rem;
		}
		.sx-info{

		}
		.aui-content-padded{
			padding: 0.75rem;
			margin: 0;
		}
		.list .p span{
			display: inline-block;
			color: #fff;
			opacity: 0.7;
			font-size: 0.65rem;
		}
		.list .p{
			text-align: center;
		}
		.list .p p{
			font-size: 0.85rem;
			padding-top: 0.25rem;
		}
		.list h3{
			color: #fff;
			font-weight: bold;
			font-size: 0.7rem;
			opacity: 0.7
		}
		.sx-fuzhi{
			font-size: 0.75rem;
			margin-top: 0.5rem;
			margin-bottom: 0.258rem;
		}
		.sx-fuzhi span:last-child{
			border: 1px solid #fff;
			margin-left: 0.5rem;
			border-radius: 1rem;
			padding: 0.15rem 0.55rem;
			font-size: 0.65rem;
			letter-spacing: 2px
		}
	</style>
</head>

<body>
	<div class="aui-content">
		<div class="sx-top">
			<div class="t" id="yaoqing">

			</div>
			<div class="b">
				<div class="sx-btn sx-btn-animation" tapmode onclick="yaoqing()">立即邀请好友</div>
				<p class="sx-fuzhi" tapmode onclick="fuzhi()">我的邀请码：<span id="yqmcode"></span><span>复制</span></p>
			</div>
		</div>
	</div>
	<div class="aui-content aui-content-padded aui-padded-t-5">
		<div class="sx-info">
			<div class="h2 aui-card-list-footer" tapmode onclick="_url({url:'member_yaoqing_text',title:'三级下线说明'})">
				<span><em></em>三级统计</span>
				<span ><i class="aui-iconfont aui-icon-question"></i></span>
			</div>
			<div class="list">
				<div class="aui-card-list-footer tongji_1">
					<h3>一级</h3>
					<div class="p">
						<span>今日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>昨日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>总共人数</span>
						<p>0</p>
					</div>
				</div>
				<div class="aui-card-list-footer tongji_2">
					<h3>二级</h3>
					<div class="p">
						<span>今日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>昨日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>总共人数</span>
						<p>0</p>
					</div>
				</div>
				<div class="aui-card-list-footer tongji_3">
					<h3>三级</h3>
					<div class="p">
						<span>今日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>昨日人数</span>
						<p>0</p>
					</div>
					<div class="p">
						<span>总共人数</span>
						<p>0</p>
					</div>
				</div>
			</div>
		</div>
		<div class="sx-foot">
			<div class="h2">
				<em></em>邀请小技巧
			</div>
			<div class="p" id="yaoqing_text">

			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript">
	apiready = function() {
		_user = _getPrefs('_user');
		api.parseTapmode();
		$('#yqmcode').text(_user.yqm);
		$('#yaoqing').html(_getPrefs('_config').yaoqing.s_text);
		$('#yaoqing_text').html(_getPrefs('_config').yaoqing.text);
		data();
	}
	function data(){
		_ajax('renwu/yaoqing',function(ret,err){
			if(ret){
					var tongji = ret.tongji;
					for (var i = 0; i < 3; i++) {
						for (var i_s = 0; i_s < tongji['s'+(i+1)].length; i_s++) {
							$('.tongji_'+(i+1)+' p').eq(i_s).text(tongji['s'+(i+1)][i_s]);
						}
					}
			}else{
				_alert(JSON.stringify(err))
			}
		})
	}
	function yaoqing(){
		api.openFrame({
			name : 'member_yaoqing_fx',
			url : _h_w + 'member_yaoqing_fx.html',
			rect : {
				x : 0,
				y : 0,
				w : 'auto',
				h : 'auto',
			},
			bgColor : 'rgba(0,0,0,0)',
			animation:{
				type:"none",                //动画类型（详见动画类型常量）
				// subType:"from_bottom",       //动画子类型（详见动画子类型常量）
				// duration:300
			},
		})
	}
	// 复制
	function fuzhi(){
		var clipBoard = api.require('clipBoard');
		clipBoard.set({
			value : _user.yqm
		}, function(ret, err) {
			if (ret) {
				_msg("复制成功，快把链接分享给朋友们吧")
			}
		});
	}


</script>

</html>
